<template>
	<div>
		<h2>Badge</h2>
		<Badge :count="3">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge>
			<a href="#" class="demo-badge" style="margin-left: 32px"></a>
			<Icon type="md-time" slot="count" color="#ed4014" size="16" />
		</Badge>

		<Badge :count="5" type="primary" status="success">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge :count="5" type="success">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge :count="5" type="normal">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge :count="5" type="info">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge :count="5" type="error">
			<a href="#" class="demo-badge"></a>
		</Badge>
		<Badge :count="5" type="warning">
			<a href="#" class="demo-badge"></a>
		</Badge>

		<Badge text="new">
			<a href="#" class="demo-badge" type="error"></a>
		</Badge>

		<Dropdown>
			<a href="javascript:void(0)">
				下拉菜单
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<DropdownItem>驴打滚</DropdownItem>
				<DropdownItem>炸酱面</DropdownItem>
				<DropdownItem disabled>豆汁儿</DropdownItem>
				<DropdownItem>冰糖葫芦</DropdownItem>
				<DropdownItem divided>北京烤鸭</DropdownItem>
			</DropdownMenu>
		</Dropdown>

		<Dropdown>
			<a href="javascript:void(0)">
				hover 触发
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<DropdownItem>驴打滚</DropdownItem>
				<DropdownItem>炸酱面</DropdownItem>
				<DropdownItem>豆汁儿</DropdownItem>
				<DropdownItem>冰糖葫芦</DropdownItem>
				<DropdownItem>北京烤鸭</DropdownItem>
			</DropdownMenu>
		</Dropdown>
		<Dropdown trigger="click" style="margin-left: 20px">
			<a href="javascript:void(0)">
				click 触发
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<DropdownItem>驴打滚</DropdownItem>
				<DropdownItem>炸酱面</DropdownItem>
				<DropdownItem>豆汁儿</DropdownItem>
				<DropdownItem>冰糖葫芦</DropdownItem>
				<DropdownItem>北京烤鸭</DropdownItem>
			</DropdownMenu>
		</Dropdown>
		<Dropdown trigger="contextMenu" style="margin-left: 20px">
			<a href="javascript:void(0)">
				right click
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<DropdownItem>返回</DropdownItem>
				<DropdownItem style="color: #ed4014">删除</DropdownItem>
			</DropdownMenu>
		</Dropdown>
	</div>
</template>

<script lang="ts">
	import { Vue, Component, Prop } from "vue-property-decorator";
	@Component
	export default class AlterTest extends Vue {}
</script>
<style   scoped>
	.demo-badge {
		width: 42px;
		height: 42px;
		background: #eee;
		border-radius: 6px;
		display: inline-block;
	}
</style>
 